<template>
  <div class="foodrankingboard">
    <van-sticky>
      <div class="foodrankingboardtop">
        <span @click="$router.go(-1)"
          ><img src="../assets/image/ic_back_dark_center.png" alt=""
        /></span>
        <span>食物排行版</span>
      </div>
    </van-sticky>
    <div class="foodrankingboardcont" v-if="landing">
      <div class="foodrankingboardleft">
        <ul>
          <li
            v-for="item in foodboardlist"
            :class="{ active: item.id === activeKey }"
            :key="item.id"
            @click="activeKey = item.id"
          >
            {{ item.target }}
          </li>
        </ul>
      </div>

      <div class="foodrankingboardright">
        <ul v-for="(u, index) in lists" :key="index">
          <li
            v-for="i in u"
            :key="i.id"
            @click="
              $router.push({ path: '/skipfoodlist', query: { id: i.id } })
            "
          >
            <van-image width="55" height="55" :src="i.image" />
            <span> {{ i.title }}</span>
            <span>
              <svg
                t="1637051677457"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2464"
                width="15"
                height="15"
              >
                <path
                  d="M731.7 475.1L370.6 80.8c-19.7-21.5-53-22.9-74.4-3.3-21.5 19.7-22.9 53-3.3 74.4l328.6 358.8-328.3 359.8c-19.6 21.5-18.1 54.8 3.4 74.4 21.5 19.6 54.8 18.1 74.4-3.4l360.5-394.9c0.7-0.8 1.5-1.7 2.1-2.5 16.4-19.9 16.1-49.4-1.9-69z"
                  p-id="2465"
                  fill="#c1c1c1"
                ></path>
              </svg>
            </span>
          </li>
        </ul>
      </div>
    </div>

    <div v-else>
      <van-skeleton title :row="3" v-for="index in 6" :key="index" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foodboardlist: [],
      activeKey: 0,
      landing: false,
    };
  },
  created() {
    this.axios
      .get(
        "https://api.kele8.cn/agent/http://one.boohee.com/store/pages/food_list_json"
      )
      .then((res) => (this.foodboardlist = res.data.content))
      .then(() => {
        setTimeout(() => {
          this.landing = true;
        }, 300);
      });
  },
  computed: {
    lists() {
      return this.foodboardlist.map((item) => {
        if (this.activeKey === item.id) {
          return item.list;
        }
      });

      //   return 12;
    },
  },
};
</script>

<style lang="less" scoped>
.foodrankingboard {
  width: 100vw;
  .foodrankingboardtop {
    width: 100%;
    display: flex;
    align-items: center;
    background: white;
    // border-bottom: 1px solid #CCC;
    margin-bottom: 10px;
    // padding-bottom: 10px;
    // justify-content:space-between;
    span {
      &:nth-of-type(1) {
        // margin-top: 2px;
        padding-left: 3px;
        img {
          padding-top: 4px;
          width: 30px;
          height: 30px;
        }
      }
      &:nth-of-type(2) {
        height: 100%;
        font-size: 17px;
      }
    }
  }
  //   position: absolute;
  .foodrankingboardcont {
    width: 100vw;
    border-top: 1px solid rgba(204, 204, 204, 0.733);
    display: flex;

    .foodrankingboardleft {
      width: 20vw;
      text-align: center;
      display: flex;
      flex-direction: column;
      ul {
        width: 100%;
        //   background: #f5f6fa;
        background: red;
        li {
          padding: 19px 5px;
          // border: 1px solid red;
          background-color: #ededee;
          font-size: 14px;
          &.active {
            background: #ffffff;
          }
        }
      }
    }
    .foodrankingboardright {
      // background: blue;
      // width: 75vw;

      flex: 1;
      ul {
        overflow: hidden;
        li {
          height: 100%;
          padding: 5px 10px;
          padding-right: 0;
          display: flex;
          align-items: center;
          span {
            &:nth-of-type(1) {
              height: 100px;
              flex: 1;
              // height: 100%;
              border-bottom: 1px solid rgba(204, 204, 204, 0.459);
              padding: 30px 0;
              margin-left: 10px;
              padding-right: 0;
              line-height: 50px;
            }
            &:nth-of-type(2) {
              padding-top: 5px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>